{% load i18n common %}
{% block setup_form %}
  <div style="padding: 10px;height: 420px;width: 700px">
    <form class="layui-form action-form setup-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}">
      {% csrf_token %}
      {% with form.form as f %}
        <div class="layui-form-item {% if not request.user.is_superuser or f.base_fields.company.queryset.count == 1%} layui-hide {% endif %}">
            {% layui_inline f.company %}
        </div>
        <div class="layui-form-item">
          {% layui_inline f.workflow_code %}
          {% layui_inline f.workflow_name %}
        </div>
        {% block setup_object %}
          <div class="layui-form-item">
            {% layui_inline f.content_type %}
            {% layui_inline f.departments %}
          </div>
        {% endblock %}
        <div class="layui-form-item">
          {% layui_inline f.start_date %}
          {% layui_inline f.end_date %}
        </div>
        <div class="layui-hide">
          {{ f.node }}
        </div>
        <div class="layui-tab">
          <ul class="layui-tab-title">
            <li><span class="required">*</span>{% trans 'workflow.tabs.workflowSetup' %}</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="layui-form-item">
                <div id="workflowNodeContainer" class="layui-tab layui-tab-brief" lay-filter="workflow-node"
                     style="width: 680px">
                  <a id="addWorkflowNode" href="javascript:void(0);" class="layui-btn"
                     style="float: right;width: 80px;">Add</a>
                  <ul id="tab-title-id" class="layui-tab-title" style="margin-right: 80px;"></ul>
                  <div id="tab-content-id" class="layui-tab-content" style="height: 120px; padding-top: 20px"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endwith %}
    </form>
  </div>
{% endblock %}
<script>
  layui.use(['laydate', 'element'], function () {
    var laydate = layui.laydate, element = layui.element;
    $("form.layui-form input.layui-date").each(function () {
      laydate.render({elem: this, type: "date"});
    });
    $('li.workflow-node').hover(function () {
    });
    var lastStamp = null;

    function initNode(num) {
      $.get("/workflow/workflownode/add/?num=" + num + '&company='+$('input[name=company]').val(), function (data) {
        var timestamp = Date.parse(new Date());
        lastStamp = timestamp;
        var title = '';
        if (num != 1) {
          title += '<i class="fa fa-arrow-right" style="color:#7ac143;padding: 0 5px;"></i>';
        }
        title += '<i class="layui-icon layui-icon-group" style="color:#7ac143;" title="{% trans 'Workflow Node' %}"></i>';
        if (num != 1) {
          title += '<i id="' + timestamp + '" class="layui-icon layui-unselect layui-tab-close">ဆ</i>';
        }
        element.tabAdd('workflow-node', {
          title: title
          , content: data
          , id: timestamp
        });
        element.tabChange('workflow-node', timestamp);
        $("#" + timestamp).click(function () {
          element.tabDelete('workflow-node', timestamp);
          re_view_node_list();
        })
      });
    }

    $("#addWorkflowNode").click(function (elem) {
      $("div.layui-tab-item.layui-show")
      if (lastStamp && lastStamp === Date.parse(new Date())) {
        return
      }
      var num = $('input[name^="node_code"]').length;
      initNode(num+1);
    });
    initNode(1);
    var pre_post = function () {
      var nodes = [];
      var node_valid = true;
      $("#workflowNodeContainer div.layui-tab-item").each(function (index, item) {
        var node_id = $(item).find('input[name=node_id]').val();
        var approvers = [], notifiers = [];
        $(item).find('input[name=approver]').each(function (i, approver) {
          approvers.push(parseInt($(approver).val()))
        });
        if(approvers.length === 0){
          layer.msg("{% trans 'workflow.errors.approverMissing' %}", {icon: 5})
          node_valid = false;
          return false
        }
        $(item).find('input[name=notifier]').each(function (i, notifier) {
          notifiers.push(parseInt($(notifier).val()))
        });
        var approver_scope = $(item).find('select[name=approver_by_overall]').val();
        var notifier_scope = $(item).find('select[name=notify_by_overall]').val();
        var node_code = $(item).find('input[name=node_code]').val();
        var node_name = $(item).find('input[name=node_name]').val();
        var node = {
          node: node_id
          , approvers: approvers
          , notifiers: notifiers
          , approver_scope: approver_scope
          , notifier_scope: notifier_scope
          ,node_code:node_code
          ,node_name:node_name
        };
        nodes.push(node)
      });
      $("input[name=node]").val(JSON.stringify(nodes))
      return node_valid;
    };
    $("form.setup-form").get(0).pre_post = pre_post;
    function re_view_node_list() {
       $("#tab-content-id").find('input[name=node_code]').each(function (i, item) {
           $(item).val(i+1)
        });
    }
  });
</script>